<template>
  <teleport to="#Login" class="mock-login">
    <div class="main-warp" v-show="isLogin">
      <transition name="animition-login">
        <div class="main-content" v-if="isLogin">
          <span
            class="iconfont icon-close input-icon pointer"
            @click.stop="hideLogin($event)"
          ></span>
          <div class="formDiv">
            <h2 class="text-center">{{loginType == 'login' ? '登录' : '注册'}}</h2>

            <div class="dataform" v-if="loginType == 'login'">
              <v-form @form-submit="onFormSubmit">
                <div class="input-warp gap">
                  <span class="iconfont icon-bianzu2 input-icon"></span>
                  <v-input
                    v-model="form.phone"
                    type="text"
                    class="inputs"
                    placeholder="请输入手机号码"
                    :rules="phoneRules"
                  ></v-input>
                </div>

                <div class="input-warp gap">
                  <span class="iconfont icon-bianzubeifen4 input-icon"></span>
                  <v-input
                    v-model="emailValue"
                    type="password"
                    class="inputs"
                    placeholder="请输入密码"
                    :rules="passwordRules"
                  ></v-input>
                </div>

                <template #submit>
                  <div class="btn-warp">
                    <div class="text-center">
                      <span class="m btn lgbtn blue btn-block">测试</span>
                    </div>
                  </div>
                </template>

                <div class="gap2">
                  <div class="pull-right" style="margin-top: 6px">
                    <a href="javascript:;" class="link">忘记密码</a
                    ><span class="split-space">|</span
                    ><a href="javascript:;" class="link" @click="changeType('register')"
                      >新用户注册</a
                    >
                  </div>
                </div>
              </v-form>
            </div>
            <div class="dataform" v-if="loginType == 'register'">
              <v-form @form-submit="onFormSubmit">
              <div class="form-item">
                <div class="input-warp">
                  <span class="iconfont input-icon icon-bianzu2"></span
                  ><input
                    id="userName"
                    name="userName"
                    placeholder="手机号码"
                    type="text"
                    class="inputs"
                    
                  />
                </div>
              </div>
              <div class="form-item">
                <div class="input-warp s">
                  <span
                    class="iconfont input-icon icon-yanzhengma-xianxing"
                  ></span>
                  <input
                    id="kaptcha"
                    name="kaptcha"
                    placeholder="验证码"
                    type="text"
                    class="inputs"
                    value=""
                  />
                  <div id="popup-captcha" style="display: none"></div>
                </div>
                <div class="pull-right">
                  <button id="btnSendCode" class="btn lgbtn blue">
                    获取验证码
                  </button>
                </div>
              </div>

              <div class="form-item">
                <div class="input-warp">
                  <span class="iconfont input-icon icon-bianzu12"></span>
                  <input
                    id="pwd"
                    type="password"
                    placeholder="至少6位字母或数字"
                    maxlength="20"
                    name="password"
                    value=""
                    class="inputs"
                  />
                </div>
              </div>

              <div class="form-item">
                <div class="input-warp">
                  <span class="iconfont input-icon icon-bianzu12"></span>
                  <input
                    id="repwd"
                    type="password"
                    placeholder="至少6位字母或数字"
                    maxlength="20"
                    name="password2"
                    value=""
                    class="inputs"
                  />
                </div>
              </div>
              <div class="form-item">
                <div class="input-warp">
                  <span class="input-icon iconfont icon-youxiangbangding"></span
                  ><input
                    id="email"
                    name="email"
                    placeholder="邮箱地址"
                    type="text"
                    class="inputs"
                    value=""
                  />
                </div>
              </div>
              <div class="btn-warp">
                <div class="text-center">
                  <button
                    type="button"
                    id="btnSubmit"
                    class="btn lgbtn blue btn-block"
                  >
                    注册
                  </button>
                </div>
              </div>
              <div class="agreement gap">
                <div class="text-right">
                  <div class="pull-left" @click="changeType('login')">
                    已有账号，登录
                  </div>
                  <p>
                    注册即代表您已阅读并同意《<a
                      href="javascript:;"
                      target="_blank"
                      class="link"
                      >使用协议</a
                    >》
                  </p>
                </div>
              </div>
              </v-form>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </teleport>
</template>


<script>
import { defineComponent, computed, ref, reactive, toRefs, watch } from "vue";
import { useStore ,mapMutations} from "vuex";
import useDOMCreate from "../../hooks/useDOMCreate";
import VInput from "../form/vInput.vue";
import VForm from "../form/vForm.vue";
export default defineComponent({
  components: {
    VInput,
    VForm,
  },
  props: {

  },
  setup(props) {
    useDOMCreate("Login");
    const store = useStore();
    const isLogin = computed(() => store.state.login.isLogin);
    const loginType = computed(() => store.state.login.loginType);
    const mutations = mapMutations('login', ['CHANGE_LOGINTYPE', 'HANDLER_LOGIN'])
    const CHANGE_LOGINTYPE = mutations.CHANGE_LOGINTYPE.bind({ $store: store })
    const HANDLER_LOGIN = mutations.HANDLER_LOGIN.bind({ $store: store })

    let data = reactive({
      emailValue1: "123123",
      type: loginType,
      form: {
        phone: "122223",
        password: "",
      },
    });

    const emailValue = ref("");

    const phoneRules = [
      { type: "required", message: "手机号不能为空!" },
    ];

    const passwordRules = [
      { type: "required", message: "密码不能为空!" },
    ];

    const changeType = (str) => {
      data.type = str
      CHANGE_LOGINTYPE(str)
    };

    const hideLogin = (e) => {
      HANDLER_LOGIN(false)
    };


    const onFormSubmit = (result) => {
      console.log(result);
    };

    return {
      ...toRefs(data),
      isLogin,
      loginType,
      store,
      emailValue,
      passwordRules,
      phoneRules,
      changeType,
      hideLogin,
      onFormSubmit,
    };
  },
});
</script>

<style>
.animition-login-enter-from,
.animition-login-leave-to {
  opacity: 0;
  transform: translateY(-50%);
}
.animition-login-enter-to,
.animition-login-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.animition-login-enter-active,
.animition-login-leave-active {
  transition: all 0.1s linear;
}
.mock-login {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.icon-close {
  position: absolute;
  right: 0px;
  top: 20px;
}
.text-center {
  position: relative;
}
.main-warp {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
#loginDiv {
  display: none !important;
}
.navbar-header > button {
  display: none !important;
}
.formDiv h2 {
  padding: 10px 0 20px;
  font-size: 20px;
  color: #545454;
}

.third-auth {
  text-align: center;
  position: relative;
  padding: 10px 0;
}

.title {
  padding: 10px 0 20px;
  font-size: 20px;
  color: #545454;
}

.navbar {
  min-height: 60px;
}
.navbar-inverse {
  background-color: #fff;
  border-color: #fff;
  color: #676767;
}

.main-content {
  background: #fff;
  width: 450px;
  padding: 20px 50px;
  position: relative;
  border-radius: 4px;
  margin: 0 auto;
  box-shadow: 0 0 4px rgb(0 0 0 / 20%);
}
.input-warp {
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  padding: 7px 0;
  position: relative;
}
.input-warp.focus {
  border-color: #649efd;
}

.form-item {
  margin-top: 20px;
}
.btn-warp {
  margin-top: 28px;
  width: 100%;
}
.error-content {
  text-indent: 18px;
}
input::-ms-clear {
  display: none;
}
input::-ms-reveal {
  display: none;
}
.input-icon {
  padding: 0 18px;
  color: #999;
}
.pull-right {
  float: right;
}
.inputs {
  border: 0;
  width: 70%;
  color: #545454;
  background: transparent;
}
.inputs:focus {
  outline: 0;
}
.lgbtn {
  line-height: 26px;
}
.btn.blue,
.btn.blue:active {
  background-color: #649efd;
  color: #fff;
  border: 1px solid #649efd;
  width: 100%;
}
.gap {
  margin-top: 24px;
  font-size: 14px;
  display: flex;
}
.gap2 {
  margin-top: 20px;
  font-size: 14px;
  overflow: hidden;
}
.biggap {
  margin-top: 40px;
}
.gap2 .split-space {
  color: #649efd;
  margin: 0 10px;
}
a.link {
  color: #649efd;
}
a.link:hover {
  color: #649efd;
  text-decoration: underline;
}
.third-party-title {
  border-bottom: 1px solid #dedede;
}
.third-party-title h5 {
  margin-bottom: -5px;
}
.third-party-title span {
  background-color: white;
  padding: 0 10px 0 10px;
  color: #545454;
}

.login-warpper {
  width: 500px;
  height: 400px;
}

.navbar-header > button {
  display: none !important;
}
.formDiv h2 {
  padding: 10px 0 20px;
  font-size: 20px;
  color: #545454;
  font-weight: 500;
}
.title {
  padding: 10px 0 20px;
  font-size: 20px;
  color: #545454;
}
.ding {
  padding: 40px 15px 20px 15px;
  text-align: center;
}
.ding img {
  border-radius: 5px;
}
.ding ul {
  width: 300px;
  margin: 15px auto;
}
.ding ul li {
  text-align: left;
  padding: 5px;
}
.switch {
  text-align: right;
  padding-right: 15px;
  line-height: 34px;
}
.fade-out {
  animation-duration: 1s;
}
.fade-in {
  animation-duration: 0.5s;
}

.navbar {
  min-height: 60px;
}
.navbar-inverse {
  background-color: #fff;
  border-color: #fff;
  color: #676767;
}

.inputs {
  border: 0;
  color: #545454;
  background: transparent;
}

.input-icon {
  color: #999;
}
.inputs:focus {
  outline: 0;
}

.input-warp.s {
  display: inline-block;
  box-sizing: border-box;
}
.input-warp.focus {
  border-color: #649efd;
}
p {
  margin-bottom: 20px;
}
.lgbtn {
  line-height: 26px;
}
a.link {
  color: #649efd;
}
a.link:hover {
  color: #649efd;
  text-decoration: underline;
}

.agreement {
  font-size: 13px;
  color: #999;
}
</style>